<template>
	<main>
		<el-row style=";margin-top:20px">
			<el-col :span="24" align="right">
				<el-button @click.native="addPoint"><icon name="plus"></icon></el-button>
			</el-col>
		</el-row>
		<el-row style="width: 100%;margin-top:15px;" stripe>
			<el-table :data="pointList" v-loading="loading">
				<el-table-column prop="id" label="ID" width="100"></el-table-column>
				<el-table-column prop="name" label="名称" width="170"></el-table-column>
				<el-table-column prop="point" label="节点" width="170"></el-table-column>

				<el-table-column></el-table-column>
				<el-table-column label="操作" width="140">
					<template slot-scope="scope" >
						<el-button size="small" @click="editPointEvent(scope.row)">
							<template>
								<icon name="pencil"></icon>
							</template>
						</el-button>
						<el-button size="small" @click="removePoint(scope.row)">
							<template>
								<icon name="remove" color="crimson"></icon>
							</template>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-dialog title="新建消息名称" :visible.sync="addPointDialog">
			<el-form label-width="120px">
				<el-form-item label="名称">
					<el-input type="text" v-model="newPoint.name"></el-input>
				</el-form-item>
				<el-form-item label="节点">
					<el-input type="text" v-model="newPoint.point"></el-input>
				</el-form-item>
				<el-form-item label="app">
					<el-select v-model="newPoint.appId" placeholder="选择公司">
						<el-option
							v-for="app in appList"
							:key="app.id"
							:label="app.appName"
							:value="app.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item align="right">
					<el-button @click.native="cancel">取消</el-button>
					<el-button type="primary" @click.native="submitNewPoint">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog title="编辑消息名称" :visible.sync="editPointDialog">
			<el-form label-width="120px">
				<el-form-item label="名称">
					<el-input type="text" v-model="editPoint.name"></el-input>
				</el-form-item>
				<el-form-item label="节点">
					<el-input type="text" v-model="editPoint.point"></el-input>
				</el-form-item>
				<el-form-item label="app">
					<el-select v-model="editPoint.appId" placeholder="选择公司">
						<el-option
							v-for="app in appList"
							:key="app.id"
							:label="app.appName"
							:value="app.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item align="right">
					<el-button @click.native="cancel">取消</el-button>
					<el-button type="primary" @click.native="submitEditingPoint">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</main>
</template>

<script>
	export default {
		name: 'mail-points',
		data(){
			return {
				loading:false,
				addPointDialog:false,
				editPointDialog:false,
				pointList:[],
				editPoint:{id:undefined,name:'',point:'',appId:''},
				newPoint:{name:'',point:'',appId:''},
				appList:[],
			}
		},
		computed:{},
		methods:{
			addPoint(){
				this.addPointDialog = true;
			},
			editPointEvent(row){
				this.editPoint = row;
				this.editPointDialog = true;
			},
			fetchApps(){
				this.$store.dispatch({
					type:'fetch',
					name:'getAppList',
				}).then(res=>{
					if(!res.errCode){
						this.appList = res;
					}else{
						this.$message({type:'error',message:'获取app错误'});
					}


				}).catch(error=>{
					this.$message({type:'error',message:'获取不到app'});
				})
			},
			removePoint(row){
				this.$confirm('确定删除数据?', '提醒', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})
					.then(() => {
						this.$store.dispatch({
							type:'fetch',
							name:'deleteMailPoint',
							data:{id:row.id},
						}).then(res=>{
							if(res.errCode){
								this.$message({message:res.errMsg,type: 'error'});
							}else{
								this.$message({message:'删除成功',type: 'success'});
								this.cancel();
							}
						}).catch(error=>{
							this.$message({
								message:'连不上服务器',
								type: 'error'
							});
						});
					}).catch();
			},
			submitNewPoint(){
				let error;
				if(!this.newPoint.name) error = '名称';
				if(!this.newPoint.point) error = '节点';
				if(!this.newPoint.appId) error = 'appId';
				if(error){
					this.$message({type:'error',message:error+'不能为空'});
				}else{
					this.$store.dispatch({
						type:'fetch',
						name:'createMailPoint',
						data:{name:this.newPoint.name,point:this.newPoint.point,appId:this.newPoint.appId}
					}).then(res=>{
						this.$message({type:'success',message:'提交成功'});
						this.cancel();
					}).catch(error=>{
						this.$message({type:'error',message:error.errMsg});
						this.cancel();
					})
				}
			},
			submitEditingPoint(){
				let error;
				if(!this.editPoint.name) error = '名称';
				if(!this.editPoint.point) error = '节点';
				if(!this.editPoint.appId) error = 'appId';
				if(error){
					this.$message({type:'error',message:error+'不能为空'});
				}else{
					this.$store.dispatch({
						type:'fetch',
						name:'updateMailPoint',
						data:{
							id:this.editPoint.id,
							name:this.editPoint.name,
							point:this.editPoint.point,
							appId:this.editPoint.appId,
						}
					}).then(res=>{
						this.$message({type:'success',message:'编辑成功'});
						this.cancel();
					}).catch(error=>{
						this.$message({type:'error',message:error.errMsg});
						this.cancel();
					})
				}
			},
			resetData(){
				this.fetchPoints();
				this.newPoint = {name:'',point:'',appId:''};
				this.editPoint = {id:undefined,name:'',point:'',appId:''};
			},
			cancel(){
				this.resetData();
				this.addPointDialog = false;
				this.editPointDialog = false;
			},
			fetchPoints(){
				this.loading = true;
				this.$store.dispatch({
					type:'fetch',
					name: 'getMailPointList',
				}).then(res=>{
					this.loading = false;
					if(!res.errCode){
						this.pointList = res;
					}else{
						this.$message({
							type:'error',
							message:res.errMsg
						})
					}
				}).catch(error=>{
					this.loading = false;
					this.$message({
						type:'error',
						message:error.errMsg
					})
				})
			},
		},
		created(){
			this.fetchPoints();
			this.fetchApps();
		},
	}
</script>
